<template>
    <el-badge :value="value" :hidden="!value" />
</template>
<script>
import { query } from '@/chaos/functions/common/Data';
import { SideMenuData } from '@/app/config';
import { ref, watch, onMounted } from 'vue';
import { useRoute } from 'vue-router';

export default {
    name: 'DataBadge',
    props: {
        link: {
            required: true,
            default: '',
        },
    },
    setup(props) {
        const value = ref('');
        const route = useRoute();
        const queryValue = async () => {
            const method = SideMenuData().get(props.link);
            if (!method) return;
            value.value = await query(method);
        };
        onMounted(queryValue);
        watch(route, queryValue);
        return { value };
    },
};
</script>
